<template>
<div class="class-mg">
    <!-- 创建班级头部 -->
<div class="create-class">
    <el-button @click="showModal=true" style="margin-left: 10px;">创建班级</el-button>
    <el-button @click="showModal2=true">发送通知</el-button>
</div>

<!-- 班级信息表格 -->
 <div class="my-class">
  <span>我创建的班级:</span>
  <el-table :data="ClassInfo" style="width: 100%;border-radius: 10px;">
      <el-table-column prop="classId" label="班级ID" width="120"></el-table-column>
      <el-table-column prop="className" label="班级名称" width="180"></el-table-column>
      <el-table-column prop="classCode" label="班级码" width="180"></el-table-column>
      <!-- 确认删除 -->
      
      <el-table-column  label="删除"  #default="data">
        <el-popconfirm title="确认删除?" @confirm="onDeleteClass(data.row.classId)">
                        <template #reference>
                          <img src="/src/assets/svg/delete1.svg" class="deleye-img">
                        </template>
                    </el-popconfirm>
        
      </el-table-column>

    </el-table>
 </div>


</div>

<!-- 创建班级弹窗 -->
<n-modal v-model:show="showModal">
      <n-card style="width: 600px" title="创建班级" role="dialog" aria-modal="true">
        <!-- 分割线 -->
        <el-divider content-position="right">
      <el-icon><star-filled /></el-icon>
    </el-divider>
    <!-- 关闭框 -->
        <template #header-extra>
          <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal = false">
        </template>
        <!-- 主要内容 -->
        <div class="alter">
          班级名称: <n-input v-model:value="createClassData.className" type="text" placeholder="请输入班级名" maxlength="20" show-count clearable />
        </div>
        <!-- 提交按钮 -->
        <template #footer>
            <div style="display: flex;justify-content: flex-end;">
            <el-button @click="onUpClassData()">提交</el-button>
          </div>
        </template>
      </n-card>
    </n-modal>

    <!-- 发送通知弹窗 -->
    <n-modal v-model:show="showModal2">
      <n-card style="width: 600px" title="发送通知" role="dialog" aria-modal="true">
        <!-- 分割线 -->
        <el-divider content-position="right">
      <el-icon><star-filled /></el-icon>
    </el-divider>
    <!-- 关闭框 -->
        <template #header-extra>
          <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal2 = false">
        </template>
        <!-- 主要内容 -->
        <div class="alter">
          请选择要通知的班级:<n-select v-model:value="sendInformData.informClass" style="width: 100%" multiple :options="selectOptions" />
          通知标题: <n-input v-model:value="sendInformData.informTitle" type="text" placeholder="请输入通知标题" maxlength="20" show-count clearable />
          通知内容: <n-input v-model:value="sendInformData.informText" type="textarea" placeholder="请输入通知内容" maxlength="150" show-count clearable />
        </div>
        <!-- 提交按钮 -->
        <template #footer>
            <div style="display: flex;justify-content: flex-end;">
            <el-button @click="onSendInform()">发送</el-button>
          </div>
        </template>
      </n-card>
    </n-modal>

</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { StarFilled } from "@element-plus/icons-vue";
import { Star } from "@element-plus/icons-vue";
import teacherHttp from '@/api/teacherHttp';
import useUserStore from '@/stores/useUserStore';
import { openInfo } from '@/utils/openInfo';
const userStore = useUserStore()
// 显示弹窗
const showModal = ref(false)
const showModal2 = ref(false)
//获取
onMounted(()=>{
  //初始化获取数据
  getClassList()
})

// 班级表单数据 classId className teacherId class_code
const ClassInfo =ref()

const createClassData = ref({
  className:'',
  teacherId:userStore.userInfo.userId,
})

// 提交创建班级表单--------------------------------
function onUpClassData(){
  teacherHttp.addClass(createClassData.value).then((res)=>{
    //创建班级成功后充型拉取数据
    getClassList()
    openInfo(res.msg)
    showModal.value =false
    createClassData.value.className=""
  })
}
// 删除班级---------------------------------------
function onDeleteClass(classId){
  teacherHttp.deleteClass(classId,userStore.userInfo.userId).then((res)=>{
    openInfo(res.msg)
    //更新班级数据
    getClassList()
  })
}
// 发送通知选项--------------------------------------
const selectOptions = computed(()=>{
  return ClassInfo.value.map(item => ({
    label: item.className,
    value: item.classId
  }));
})
// 通知信息表单
const sendInformData = ref({
  // 要发送到的班级
  informClass:'',
  //标题
  informTitle:'',
  //内容
  informText:'',
  //发送人
  senderId:userStore.userInfo.userId
})
// 点击发送通知提交通知表单
function onSendInform(){
  // console.log(sendInformData.value);
  teacherHttp.sendInform(sendInformData.value).then((res)=>{
    openInfo(res.msg)
    showModal2.value =false
  })
}
// 获取初始化数据
function getClassList(){
  teacherHttp.getClassList(userStore.userInfo.userId).then((res)=>{
    // 初始化班级表单数据
    ClassInfo.value= res.data
  })
}

</script>

<style scoped>
/* 最大的盒子 */
.class-mg{
background-color: rgb(182, 174, 174,0.1);
display: flex;
flex-direction: column;
height: 900px;
border-radius: 10px;
}
/* 创建班级和发送通知 */
.create-class{
    margin: 10px;
    height: 50px;
    background-color: rgb(182, 174, 174,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
}


/* 关闭弹窗键 */
.deleye-img {
  transition: transform 0.3s ease;
  cursor: pointer;
}
.deleye-img:hover {
  transform: scale(1.2);
}

.Table_box{
  
}

.demonstration {
  color: var(--el-text-color-secondary);
}

/* 我创建的班级 */
.my-class{
  border-radius: 10px;
  padding: 20px;
  
}
</style>